import React from 'react';
import { Typography, Breadcrumb, Button, Space, Divider } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

/**
 * 页面标题组件
 * @param {Object} props
 * @param {string} props.title - 页面标题
 * @param {Array} props.breadcrumb - 面包屑导航数据
 * @param {React.ReactNode} props.extra - 额外的操作区域
 * @param {React.ReactNode} props.children - 子组件
 * @param {Function} props.onBack - 返回按钮点击事件
 * @param {boolean} props.showBack - 是否显示返回按钮
 * @returns {React.ReactNode}
 */
const PageHeader = ({
  title,
  breadcrumb,
  extra,
  children,
  onBack,
  showBack = false,
  ...restProps
}) => {
  // 处理面包屑数据格式
  const breadcrumbItems = breadcrumb?.map(item => ({
    path: item.path,
    breadcrumbName: item.name,
  }));

  return (
    <div className="page-header-wrapper" style={{ marginBottom: 16 }} {...restProps}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {showBack && (
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={onBack} 
              style={{ marginRight: 8 }}
            />
          )}
          <Typography.Title level={4} style={{ margin: 0 }}>{title}</Typography.Title>
        </div>
        
        {extra && (
          <Space>
            {Array.isArray(extra) ? extra.map((item, index) => (
              <React.Fragment key={index}>{item}</React.Fragment>
            )) : extra}
          </Space>
        )}
      </div>
      
      {breadcrumbItems && breadcrumbItems.length > 0 && (
        <Breadcrumb items={breadcrumbItems.map(item => ({ title: item.breadcrumbName, href: item.path }))} />
      )}
      
      {children && (
        <div className="page-header-content" style={{ marginTop: 16 }}>
          {children}
        </div>
      )}
      
      <Divider style={{ margin: '16px 0' }} />
    </div>
  );
};

/**
 * 页面标题操作按钮
 * @param {Object} props
 * @param {string} props.text - 按钮文本
 * @param {Function} props.onClick - 点击事件
 * @param {string} props.type - 按钮类型
 * @param {React.ReactNode} props.icon - 按钮图标
 * @param {boolean} props.loading - 是否加载中
 * @returns {React.ReactNode}
 */
PageHeader.Action = ({ text, onClick, type = 'primary', icon, loading, ...restProps }) => (
  <Button
    type={type}
    onClick={onClick}
    icon={icon}
    loading={loading}
    {...restProps}
  >
    {text}
  </Button>
);

export default PageHeader;